<template>
  <view>
    <uni-list>
      <uni-list-item :clickable="true" :showArrow="true" @click="chooseHandler">
        <template v-slot:header>
          <view style="font-size: 28rpx; display: flex; align-items: center">头像</view>
        </template>
        <template v-slot:footer>
          <image
            style="height: 80rpx; width: 80rpx; border-radius: 50%; border: 1px solid #f0f0f0"
            :src="userInfo.avatarURL"
          ></image>
        </template>
      </uni-list-item>
      <uni-list-item title="姓名" :rightText="userInfo.name" />
      <uni-list-item title="学号/工号" :rightText="userInfo.number" />
      <uni-list-item title="学院/部门" :rightText="userInfo.department" />
      <uni-list-item title="班级" :rightText="userInfo.class" />
      <uni-list-item
        title="联系方式"
        :clickable="true"
        @click="handleMobileUpdate"
        :rightText="userInfo.mobilePhone"
        :showArrow="true"
      />
      <uni-list-item
        title="邮箱"
        :rightText="userInfo.email"
        @click="handleEmailUpdate"
        :clickable="true"
        :showArrow="true"
      />
    </uni-list>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { userStore } from '@/store/user.js'
  import { UpdateUserAvatar } from '@/apis/user.js'

  const useUserStore = userStore()
  const userInfo = ref({})

  // 拍摄/从相册选择
  function chooseHandler() {
    uni.chooseImage({
      count: 1,
      crop: {
        quality: 80,
        width: 800,
        height: 800,
        resize: true
      },
      success: (res) => {
        console.log(res)
        uni.uploadFile({
          url: 'https://image.dcwedu.top/api/index.php',
          filePath: res.tempFilePaths[0],
          name: 'image',
          formData: {
            token: '8337effca0ddfcd9c5899f3509b23657'
          },
          success: ({ data }) => {
            data = JSON.parse(data)
            // console.log(data);
            if (data.code !== 200) {
              uni.showToast({
                icon: 'error',
                title: data.message
              })
              return
            } else {
              UpdateUserAvatar({
                avatarURL: data.url
              }).then((res) => {
                uni.showToast({
                  icon: 'success',
                  title: '更新成功'
                })
                useUserStore.updateUserAvatar(res.avatarURL)
                userInfo.value = useUserStore.userInfo
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 2
                  })
                }, 1000)
              })
              // console.log(data);
            }
          }
        })
      }
    })
  }

  function handleMobileUpdate() {
    uni.navigateTo({
      url: '/pages/my/personalInfo/update/update?type=1'
    })
  }

  function handlePhoneUpdate() {
    uni.navigateTo({
      url: '/pages/my/personalInfo/update/update?type=2'
    })
  }

  function handleEmailUpdate() {
    uni.navigateTo({
      url: '/pages/my/personalInfo/update/update?type=3'
    })
  }

  onShow(() => {
    userInfo.value = useUserStore.userInfo
  })
</script>

<style lang="scss" scoped>
  .popup {
    .popupItem {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      background-color: white;
      width: 100%;
      text-align: center;
    }

    .popupItem:active {
      background-color: #f0f0f0;
    }
  }
</style>
